<template>
  <div class="outside">
    <RadioGroup class="radios" v-model="checked" direction="horizontal" checked-color="#9caf70">
      <Radio name="1">奖励</Radio>
      <Radio name="0">惩罚</Radio>
    </RadioGroup>


    <Field class="description" placeholder="输入奖罚内容"
           v-model="newDescription"
           rows="4"
           autosize
           label="内容"
           type="textarea"
           maxlength="100"
           show-word-limit />

    <div class="dropdown">
      <DropdownMenu active-color="#9caf70">
        <DropdownItem  v-model="currentStuIndex" :options="studentOptions" title-class="titleClass"/>
      </DropdownMenu>
    </div>

    <Cell class="cell" title="日期" is-link :arrow-direction="showTimePicker ? 'up' : 'down'" :value="String(formatDate(currentDate))" @click="controlPicker"/>

    <Button class="button" @click="addEvent">提交</Button>

    <DatetimePicker
        v-show="showTimePicker"
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="dateConfirm(currentDate)"
        @cancel="dateCancel"
    />
  </div>
</template>

<script setup>
import { RadioGroup, Radio, Button, DropdownMenu, DropdownItem, Field, Cell, Toast, DatetimePicker } from "vant";
import { ref } from "vue";
import { addInfo, getAll } from "@/v-api/add/addRewardPunish";

//Description
const newDescription = ref('');

//TimePicker
const showTimePicker = ref(false);
const currentDate = ref(new Date(2020, 0, 1));
const formatDate = (date) => `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
const minDate = new Date(2021, 0, 1);
const maxDate = new Date(Date.now());

const dateConfirm = () =>{
  showTimePicker.value = false;
}
const dateCancel = () =>{
  showTimePicker.value = false;
}
const controlPicker = () =>{
  showTimePicker.value = !showTimePicker.value;
}

//Radios
const checked = ref('1');

//DropDown
const currentStuIndex = ref(0);
const studentOptions = ref([])

//前后端数据交互
/**
 * 获取学生信息--填充studentOptions
 * @returns {Promise<void>}
 */
const stuInfo = ref([])
const getStuInfoData = async () => {
  stuInfo.value = ( await getAll() ).data
  studentOptions.value = stuInfo.value.map((item,index) =>{
    return {
      text: item.studentName,
      value: index
    }
  })
}
getStuInfoData();

/**
 * 提交表单--新增学生奖罚记录
 */
const addEvent = () =>{
  const studentId = stuInfo.value[currentStuIndex.value].studentId;
  const time = new Date(formatDate(currentDate.value));
  const description = newDescription.value
  const type = Number(checked.value)
  addInfo(studentId,time,description,type)
  Toast.success({
    message: "提交成功",
    position: "bottom"
  })

  //提交后置空表单
  checked.value = '1';
  newDescription.value = '';
  currentStuIndex.value = 0;
  currentDate.value = new Date(2020, 0, 1);
}

</script>

<style scoped>
.outside{
  margin: 15px;
}

.description{
  background-color: #f8f8f8;
  height: 140px;
  border-radius: 10px;
}

.dropdown{
  margin-top:15px;
  margin-bottom:15px;
  border-radius: 10px;
  :deep(.van-dropdown-menu__bar){
    box-shadow: unset !important;
    background-color: #f8f8f8 !important;
    height: 38px !important;
    border-radius: 10px;
  }
  :deep(.titleClass){
    color: grey !important;
  }
}

.cell{
  background-color: #f8f8f8;
  border-radius: 10px;
}
.radios{
  margin: 20px;
  font-size: 16px;
  display: flex;
  justify-content: space-around; /* 选项均匀分布在容器中 */

}

.button{
  margin-top: 20px;
  width: 100%;
  color: white;
  font-weight: bold;
  font-size: 16px;
  font-family: 幼圆;
  background-image: linear-gradient(#b9d28a,#9caf70);/* #adc280,#9caf70 */
  border-radius: 20px;
}
</style>
